<template>
  <div
    class="c-editor-page-canvas__container"
    :class="{ currentPage: canvasPage.id === props.currentPageId }"
    @click="clickPage"
  >
    <div class="c-editor-page-canvas-cover__container">
      <img src="../../../../assets/例图.jpg" alt="白板封面" draggable="false" />
    </div>
    <a-flex
      class="c-editor-page-canvas-detail__container"
      justify="space-between"
      align="center"
    >
      <div class="c-editor-page-canvas-detail__title">
        <a-input
          v-if="rename"
          v-model:value="newName"
          :id="canvasPage.id"
          placeholder="请输入新的白板名"
          @pressEnter="confirmRename"
          @blur="cancelRename"
          autofocus
        />
        <span v-else>{{ canvasPage.id }}.{{ canvasPage.name }}</span>
      </div>
      <div>
        <a-popconfirm title="确定要删除该画布吗？" :open="deleteVisible">
          <template #cancelButton>
            <a-button type="text" @click="handleDelete('cancel')" size="small">
              取消
            </a-button>
          </template>
          <template #okButton>
            <a-button
              type="primary"
              danger
              size="small"
              @click="handleDelete('confirm')"
            >
              确定删除
            </a-button>
          </template>
          <DeleteOutlined
            class="c-editor-page-canvas-detail__icon"
            @click="deleteVisible = !deleteVisible"
          />
        </a-popconfirm>
        <a-popover
          placement="bottom"
          trigger="focus"
          :overlayInnerStyle="{ padding: '12px 0' }"
        >
          <template #content>
            <div
              class="c-editor-page-canvas-detail__option"
              @click="() => (rename = true)"
            >
              重命名
            </div>
            <div class="c-editor-page-canvas-detail__option">复制链接</div>
          </template>
          <MoreOutlined class="c-editor-page-canvas-detail__icon" />
        </a-popover>
      </div>
    </a-flex>
  </div>
</template>

<script setup lang="ts">
import { MoreOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { message } from 'ant-design-vue';

const props = defineProps({
  canvasPage: {
    type: Object,
    required: true,
  },
  currentPageId: Number,
});
const emit = defineEmits({
  currentPage: ({ currentId }) => {
    return !!currentId;
  },
});

const clickPage = () => {
  emit('currentPage', { currentId: props.canvasPage.id });
};

// 重命名 功能 start
const rename = ref(false);
const newName = ref('');
const confirmRename = () => {
  rename.value = false;
  message.success('重命名成功');
};
const cancelRename = () => {
  rename.value = false;
  newName.value = '';
};
// 重命名 功能 end

// 删除 功能 start
const deleteVisible = ref(false);
const handleDelete = (type: string) => {
  deleteVisible.value = false;
  if (type === 'confirm') {
    message.success('删除成功');
  } else {
    message.error('已取消删除');
  }
  deleteVisible.value = false;
};
// 删除 功能 end
</script>

<style scoped lang="scss">
.c-editor-page-canvas__container {
  padding: 10px;
  border: 1px solid rgba(185, 185, 185, 0.5);
  border-radius: 5px;
  user-select: none;
  margin-bottom: 24px;
  cursor: pointer;
  .c-editor-page-canvas-cover__container {
    width: 100%;
    height: 12rem;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .c-editor-page-canvas-detail__container {
    padding-top: 12px;
    height: 2.7rem;
    .c-editor-page-canvas-detail__icon {
      cursor: pointer;
      border-radius: 8%;
      padding: 5px;
      color: #6b6b6c;
      &:hover {
        background: rgba(185, 185, 185, 0.2);
        color: #108ee9;
      }
    }
  }
}
.c-editor-page-canvas-detail__option {
  height: 2rem;
  width: 6rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 2rem;
  &:hover {
    background: rgba(185, 185, 185, 0.2);
    cursor: default;
  }
}
.currentPage {
  border: 1px solid #108ee9;
}
</style>
